<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .content {
            background-color: #cccccc;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 0 10px;
        }
        button {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="app" class="content">
        <div>点击次数： {{count}}</div>
        <!--
            下面两个按钮实现的效果是一样的
            注意：当前我们可以这样写是由于事件处理方法逻辑简单，单行javascript代码可以搞定，一般来说都是使用绑定方法函数来处理
            当前我们调用add()方法没有传递参数，实孙超上此时在触发add()函数时，系统会自动把当前Event事件传递过去
         -->
        <button @click="add">点击1</button>
        <button @click="this.count += 1">点击2</button>

        <!--
            绑一个需要自定义参数的事件函数
            因为此时我们已经传参数了，那么之前不传参数时的事件对象不会传了，如果要传的话需要我们手动把这个事件对象传过去
            手动传事件对象使用$event
            我们手动传了这个事件对象，那么我们的事件处理函数中需要这个事件对象时就可以手动去接收
         -->
        <button @click="addByStep(10,$event)">点击3</button>

        <!--
            多函数处理事件，同一个用户交互事件，需要调用我狐假虎威方法进行处理，要实碛有两种方案
            1、编写一个聚合函数，这个函数包含多个函数的功能
            2、在绑定方法时多个函数使用逗号隔开（推荐）
            我们开发中一般把早小单元的功能作为一个函数，后面便于复用
            看下面的例子我们甚至是处理函数与javascript代码在一起也可以
         -->
        <button @click="this.count += 100,addByStep(5),log($event)">点击4</button>


    </div>


<script>
    const {createApp,ref} = Vue
    const config = {
        setup() {
            const count = ref(0)
            /* 触发事件默认传递过来的事件会包含很多信息：事件类型、鼠标位置、键盘按键...... */
            function add(event) {
                console.log(event)
                count.value++
            }

            /* 带自定义参数的事件处理函数 */
            const addByStep = (step,event) => {
                count.value += step
                console.log(event)
            }

            const log = (event) => {
                console.log(event)
            }

            return {count,add,addByStep,log}
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>